链接两个类选择器（中间没有空格）：

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

如果您仍然需要处理像 IE6 这样的古老浏览器，请注意它不能正确读取链式类选择器：它只会读取 最后一个
类选择器（.bar在这种情况下），而不管您列出了哪些其他类。

为了说明其他浏览器和 IE6 是如何解释这一点的，请考虑以下 CSS：

* {
    color: black;
}

.foo.bar {
    color: red;
}

支持的浏览器上的输出是：

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

IE6 上的输出为：

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

脚注：

• 支持的浏览器：

  1. 未选中 ，因为此元素只有 class foo。
  2. 选择 此元素是因为该元素同时具有类foo和bar.
  3. 未选中 ，因为此元素只有 class bar。

• IE6：

  1. 未选中 ，因为此元素没有 class bar。
  2. 选择 此元素具有 class bar，而不管列出的任何其他类。